<template>
    <div class="BlogType">

        <el-table v-show="isDisplay"
                  :data="blogTypes" style="width: 50%"
                  :row-class-name="tableRowClassName"
                  @row-click="linkToMain">
            <el-table-column
                    prop="name"
                    label="类型">
            </el-table-column>
            <el-table-column
                    prop="blogSize"
                    label="数量">
            </el-table-column>
        </el-table>

        <p v-show="!isDisplay">
            {{empetyWord}}
        </p>
    </div>
</template>

<script>
    import Vue from 'vue'

    export default {
        name: "BlogType",
        data() {
            return {
                blogTypes: [],
                isDisplay: true,
                empetyWord: ''
            }
        },
        /*props:{
            blogTypes:{
                type:Array
            }
        },*/
        methods: {
            linkToMain() {
                this.$router.push({name: "BlogMain", params: {}})
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex == 1) {
                    console.log(rowIndex)
                    return 'warning-row';
                } else {
                    console.log(rowIndex)
                    return 'success-row';
                }
            },
        },
        mounted() {
            console.log(this.$route)
            Vue.axios.get('http://localhost:8500/blogType/getFakeAllType', {
                params: {s: "123"}
            }).then((response) => {
                console.log("aaabbbccc===" + response)
                if ('' != response.data) {
                    this.blogTypes = response.data
                } else {
                    this.isDisplay = false;
                    this.empetyWord = '添加一些博客类型吧';
                }
            }).catch((error) => {
                console.log("-+-+-+*/*/+-+-" + error)
                this.isDisplay = false;
                this.empetyWord = '请求出错了！';
            });
        }
    }
</script>

<style lang="sass">
.BlogType{

    .el-table .warning-row {
        background: blue;
    }

    .el-table .success-row {
        background: red;
    }

    .el-table {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
}
</style>